<template>
  <div class="app-container">
    <el-row>
      <el-col :span="10">
        <el-form inline size="small">
          <el-form-item>
            <el-input :disabled="connectState.state" v-model="connectState.host" placeholder="主机"/>
          </el-form-item>
          <el-form-item>
            <el-input-number :disabled="connectState.state" v-model="connectState.port" placeholder="端口"/>
          </el-form-item>
          <el-form-item>
            <el-button v-if="!connectState.state" type="primary" @click="open">连接</el-button>
            <el-button v-else type="primary" @click="close">关闭</el-button>
          </el-form-item>
        </el-form>

        <el-form size="small">
          <el-form-item label="发送模式">
            <el-radio-group v-model="sendData.sendModel">
              <el-radio label="ascii">ascii</el-radio>
              <el-radio label="hex">hex</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="接收模式">
            <el-radio-group v-model="connectState.reciveModel">
              <el-radio label="ascii">ascii</el-radio>
              <el-radio label="hex">hex</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <el-form inline size="small">
          <el-form-item label="消息">
            <el-input
              type="textarea"
              autosize
              v-model="sendData.value"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="sendCommand">发送</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="14">
        <div class="panel panel-default">
          <div class="panel-heading">输出区</div>
          <div class="panel-body" style="height: 400px;overflow-y: scroll">
            <ul style="line-height: 1.5">
              <li v-for="dataline in dataLines">
                <span>{{ dataline.time }}</span>
                <b class="text-forestgreen margin-left" v-if="dataline.direction === 'send'">发送</b>
                <b class="text-danger margin-left" v-if="dataline.direction === 'recive'">接收</b>
                <span class="margin-left">{{ dataline.message }}</span>
              </li>
            </ul>
          </div>
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import tcp from "@/api/tcp";

export default {
  name: "tcpclient",
  data() {
    return {
      connectState: {
        reciveModel: 'ascii',
        host: 'localhost',
        port: 10086,
        state: false,
        reciveData: null
      },
      sendData: {
        sendModel: 'ascii',
        value: ''
      },
      dataLines: []
    }
  },
  methods: {
    open() {
      tcp.clientOpen(this.connectState.host, this.connectState.port, this.connectState.reciveModel).then(res => {
        this.refreshState();
      })
    },
    close() {
      tcp.clientClose().then(res => {
        this.refreshState();
      })
    },
    refreshState() {
      tcp.clientState(this.connectState.reciveModel).then(res => {
        if (res.data.host) {
          this.connectState = res.data;
        }
      })
    },
    sendCommand() {
      if (!this.sendData.value){
        this.$message('空内容');
        return ;
      }
      if (!this.connectState.state){
        this.$message('未连接');
        return ;
      }
      let ascii, hex;
      if (this.sendData.sendModel === 'ascii') {
        ascii = this.sendData.value;
      } else {
        hex = this.sendData.value;
      }
      this.dataLines.push({time: new Date().toLocaleTimeString(), direction: 'send', message: this.sendData.value})
      tcp.clientSendCommand(ascii, hex).then(res => {
        this.dataLines.push({time: new Date().toLocaleTimeString(), direction: 'recive', message: res.data})
        this.connectState.reciveData = res.data;
      })
    }
  },
  mounted() {
    this.refreshState();
  }
}
</script>

<style scoped>
@import "../../assets/bootstrap.css";

</style>
